import { Component, AfterViewInit, OnInit, ViewChild, TemplateRef } from '@angular/core';
import {UserService} from '../../service/user.service';
import {routerTransition} from '../../router.animations';
import {DataTableDirective} from 'angular-datatables';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import {Subject} from 'rxjs/Subject';
import {UserDetailComponent} from './user-detail/user-detail.component';
declare var $: any;

class User {
  id: string;
  username: string;
  email: string;
  createBy: string;
  createTime: string;
  updateBy: string;
  updateTime: string;
}

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
  animations: [routerTransition()]
})
export class UserComponent implements OnInit, AfterViewInit {
  @ViewChild(DataTableDirective)
  dtElement: DataTableDirective;
  dtOptions: any = [];
  modalRef: BsModalRef;
  dtTrigger: Subject<any> = new Subject();
  dataList: any = [];
  seelctedRow: any = {};
  constructor(public userService: UserService, private modalService: BsModalService) { }

  ngOnInit() {
    this.dataList = [
      {id: 1, username: 'test1', email: 'test1@abc.com', createBy: '1', createTime: '2017-12-28 13:22', updateBy: '1', updateTime: '2017-12-28 13:22'},
      {id: 2, username: 'test2', email: 'test2@abc.com', createBy: '1', createTime: '2017-12-28 13:22', updateBy: '1', updateTime: '2017-12-28 13:22'},
      {id: 3, username: 'test3', email: 'test3@abc.com', createBy: '1', createTime: '2017-12-28 13:22', updateBy: '1', updateTime: '2017-12-28 13:22'},
      {id: 4, username: 'test4', email: 'test4@abc.com', createBy: '1', createTime: '2017-12-28 13:22', updateBy: '1', updateTime: '2017-12-28 13:22'},
      {id: 5, username: 'test5', email: 'test5@abc.com', createBy: '1', createTime: '2017-12-28 13:22', updateBy: '1', updateTime: '2017-12-28 13:22'},
      {id: 5, username: 'test6', email: 'test6@abc.com', createBy: '1', createTime: '2017-12-28 13:22', updateBy: '1', updateTime: '2017-12-28 13:22'},
      {id: 6, username: 'test7', email: 'test7@abc.com', createBy: '1', createTime: '2017-12-28 13:22', updateBy: '1', updateTime: '2017-12-28 13:22'},
      {id: 8, username: 'test8', email: 'test8@abc.com', createBy: '1', createTime: '2017-12-28 13:22', updateBy: '1', updateTime: '2017-12-28 13:22'},
      {id: 9, username: 'test9', email: 'test9@abc.com', createBy: '1', createTime: '2017-12-28 13:22', updateBy: '1', updateTime: '2017-12-28 13:22'},
      {id: 10, username: 'test10', email: 'test10@abc.com', createBy: '1', createTime: '2017-12-28 13:22', updateBy: '1', updateTime: '2017-12-28 13:22'},
    ];
    this.dtOptions = {
      dom: 'rt<"row" <"col-xs-6" l> <"col-xs-6" p>>',
      serverSide: true,
      // data: this.dataList,
      autoWidth: true,
      pageLength: 10,
      rowId: 'id',
      order: [[ 1, 'desc' ]],
      columns: [{
        title: '<label class="checkbox c-checkbox" ><input type="checkbox"><span class="fa fa-check"></span></label>',
        data: 'id',
        orderable: false,
        searchable: false,
        render: (data, type) => '<label class="checkbox c-checkbox"><input type="checkbox"><span class="fa fa-check"></span></label>'
      }, {
        title: '用户名',
        data: 'username'
      }, {
        title: '邮箱',
        data: 'email'
      }, {
        title: '创建人',
        data: 'createBy'
      }, {
        title: '创建时间',
        data: 'createTime'
      }, {
        title: '修改人',
        data: 'updateBy'
      }, {
        title: '修改时间',
        data: 'updateTime'
      }, {
        title: '操作',
        orderable: false,
        align: 'center',
        searchable: false,
        className: 'active-column',
        data: 'active',
        render: (data, type, row, meta) => {
          console.log(data, type, row, meta);
          return 'xx';
        }
      }],
      ajax: (data, callback) => this.userListData(data, callback),
      select: true
    };
  }

  ngAfterViewInit(): void {
    const srlf = this;
    this.dtTrigger.next();

    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.on('select', (e, s, json) => {
        const  rows = dtInstance.row({ selected: true });
        srlf.seelctedRow = rows.data();
        console.log('selected', rows.data());
      }).on('deselect', (e, s, json) => {
        const  rows = dtInstance.row({ draw: 'row' });
        srlf.seelctedRow = {};
        console.log('deselect', rows.data());
      });
    });
  }

  private userListData(data, callback) {
    this.userService.page(data).subscribe(rj => callback(rj.data));
  }

  rerender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      // Destroy the table first
      dtInstance.destroy();
      // Call the dtTrigger to rerender again
      this.dtTrigger.next();
    });
  }

  search(): void {
    this.rerender();
  }

  add (event): void {
    this.openModal('新增');
  }
  edit(event): void {
    this.openModal('修改');
  }
  openModal(title: string) {
    console.log(this.seelctedRow)
    this.modalRef = this.modalService.show(UserDetailComponent);
    this.modalRef.content.title = title;
    this.modalRef.content.userData = this.seelctedRow;
  }
}
